<template>
  <div class="floating-action-container">
    <!-- 主按钮 -->
    <div class="fab-main" @click="toggleMenu">
      <div class="fab-icon">
        <PlusOutlined v-if="!isMenuOpen" />
        <CloseOutlined v-else />
      </div>
    </div>

    <!-- 子按钮 -->
    <div class="fab-sub-buttons" :class="{ open: isMenuOpen }">
      <!-- 签到按钮 -->
      <div class="fab-sub-button checkin-btn" @click="openCheckin">
        <div class="sub-icon">
          <CalendarOutlined />
        </div>
        <div class="sub-label">签到</div>
      </div>

      <!-- 分享网站按钮 -->
      <div class="fab-sub-button share-btn" @click="openShare">
        <div class="sub-icon">
          <ShareAltOutlined />
        </div>
        <div class="sub-label">分享</div>
      </div>

      <!-- 问题反馈按钮 -->
      <div class="fab-sub-button feedback-btn" @click="openFeedback">
        <div class="sub-icon">
          <QuestionCircleOutlined />
        </div>
        <div class="sub-label">反馈</div>
      </div>

      <!-- 联系作者按钮 -->
      <div class="fab-sub-button contact-btn" @click="openContact">
        <div class="sub-icon">
          <MessageOutlined />
        </div>
        <div class="sub-label">联系</div>
      </div>
    </div>

    <!-- 签到弹窗 -->
    <CheckinModal v-model:open="showCheckinModal" />

    <!-- 分享网站弹窗 -->
    <a-modal
      v-model:open="showShareModal"
      title="分享蜂云盒子"
      :footer="null"
      width="900px"
      :closable="true"
      :mask-closable="true"
      class="share-modal"
      :destroy-on-close="true"
    >
      <div class="share-container">
        <!-- 左侧分享区域 -->
        <div class="share-left">
          <div class="share-header">
            <div class="header-info">
              <div class="share-title">
                <ShareAltOutlined class="title-icon" />
                <span>分享蜂云盒子</span>
              </div>
              <div class="share-subtitle">专业的图片管理和分享平台</div>
              <div class="share-stats">
                <span class="stat-item">
                  <CloudUploadOutlined />
                  <span>图片上传</span>
                </span>
                <span class="stat-item">
                  <TagsOutlined />
                  <span>标签管理</span>
                </span>
                <span class="stat-item">
                  <FolderOutlined />
                  <span>分类整理</span>
                </span>
              </div>
            </div>
          </div>

          <!-- 二维码展示 -->
          <div class="qr-section">
            <div class="qr-container">
              <div class="qr-background">
                <QRCodeVue3 :value="shareUrl" :size="200" level="H" class="qr-code" />
              </div>
              <div class="qr-decoration">
                <div class="decoration-dot dot-1"></div>
                <div class="decoration-dot dot-2"></div>
                <div class="decoration-dot dot-3"></div>
                <div class="decoration-dot dot-4"></div>
              </div>
            </div>
          </div>

          <!-- 分享按钮 -->
          <div class="share-action">
            <a-button type="primary" size="large" @click="copyLink" class="share-btn">
              <template #icon>
                <CopyOutlined />
              </template>
              复制链接
            </a-button>
          </div>
        </div>

        <!-- 右侧功能区域 -->
        <div class="share-right">
          <!-- 快速分享 -->
          <div class="share-platforms">
            <div class="section-header">
              <h3 class="section-title">
                <div class="title-bar"></div>
                快速分享
              </h3>
            </div>
            <div class="platform-grid">
              <div class="platform-item wechat" @click="shareToWechat">
                <div class="platform-icon">
                  <WechatOutlined />
                </div>
                <div class="platform-info">
                  <span class="platform-name">微信</span>
                  <span class="platform-desc">分享给好友</span>
                </div>
                <div class="platform-badge">热门</div>
              </div>

              <div class="platform-item qq" @click="shareToQQ">
                <div class="platform-icon">
                  <QqOutlined />
                </div>
                <div class="platform-info">
                  <span class="platform-name">QQ</span>
                  <span class="platform-desc">分享到QQ</span>
                </div>
              </div>

              <div class="platform-item weibo" @click="shareToWeibo">
                <div class="platform-icon">
                  <WeiboOutlined />
                </div>
                <div class="platform-info">
                  <span class="platform-name">微博</span>
                  <span class="platform-desc">分享到微博</span>
                </div>
              </div>

              <div class="platform-item link" @click="copyLink">
                <div class="platform-icon">
                  <LinkOutlined />
                </div>
                <div class="platform-info">
                  <span class="platform-name">链接</span>
                  <span class="platform-desc">复制链接</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 网站特色 -->
          <div class="features-section">
            <div class="section-header">
              <h3 class="section-title">
                <div class="title-bar"></div>
                网站特色
              </h3>
            </div>
            <div class="features-grid">
              <div class="feature-item">
                <div class="feature-icon">
                  <CloudUploadOutlined />
                </div>
                <div class="feature-info">
                  <span class="feature-name">图片上传</span>
                  <span class="feature-desc">支持多种格式</span>
                </div>
              </div>

              <div class="feature-item">
                <div class="feature-icon">
                  <TagsOutlined />
                </div>
                <div class="feature-info">
                  <span class="feature-name">标签管理</span>
                  <span class="feature-desc">智能分类</span>
                </div>
              </div>

              <div class="feature-item">
                <div class="feature-icon">
                  <FolderOutlined />
                </div>
                <div class="feature-info">
                  <span class="feature-name">分类整理</span>
                  <span class="feature-desc">便捷管理</span>
                </div>
              </div>

              <div class="feature-item">
                <div class="feature-icon">
                  <ShareAltOutlined />
                </div>
                <div class="feature-info">
                  <span class="feature-name">便捷分享</span>
                  <span class="feature-desc">一键分享</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 问题反馈弹窗 -->
    <a-modal
      v-model:open="showFeedbackModal"
      title="问题反馈"
      :footer="null"
      width="900px"
      :closable="true"
      :mask-closable="true"
      class="feedback-modal"
      :destroy-on-close="true"
    >
      <div class="feedback-container">
        <!-- 左侧反馈区域 -->
        <div class="feedback-left">
          <div class="feedback-header">
            <div class="header-info">
              <div class="feedback-title">
                <QuestionCircleOutlined class="title-icon" />
                <span>问题反馈</span>
              </div>
              <div class="feedback-subtitle">您的建议是我们进步的动力</div>
              <div class="feedback-stats">
                <span class="stat-item">
                  <InfoCircleOutlined />
                  <span>功能异常</span>
                </span>
                <span class="stat-item">
                  <EditOutlined />
                  <span>布局优化</span>
                </span>
                <span class="stat-item">
                  <QuestionCircleOutlined />
                  <span>其他问题</span>
                </span>
              </div>
            </div>
          </div>

          <!-- 反馈表单 -->
          <div class="feedback-form">
            <div class="form-section">
              <div class="section-title">
                <InfoCircleOutlined />
                <span>问题类型</span>
              </div>
              <div class="type-selector">
                <div
                  v-for="type in feedbackTypes"
                  :key="type.value"
                  class="type-option"
                  :class="{ active: feedbackForm.type === type.value }"
                  @click="feedbackForm.type = type.value"
                >
                  <component :is="type.icon" class="type-icon" />
                  <span>{{ type.label }}</span>
                </div>
              </div>
            </div>

            <div class="form-section">
              <div class="section-title">
                <EditOutlined />
                <span>问题描述</span>
              </div>
              <a-textarea
                v-model:value="feedbackForm.description"
                :rows="4"
                placeholder="请详细描述您遇到的问题，我们会认真处理您的反馈..."
                :maxlength="500"
                show-count
                class="description-input"
              />
            </div>

            <div class="form-section">
              <div class="section-title">
                <ContactsOutlined />
                <span>联系方式（选填）</span>
              </div>
              <a-input
                v-model:value="feedbackForm.contact"
                placeholder="请留下您的联系方式，方便我们回复您"
                class="contact-input"
              />
            </div>
          </div>
        </div>

        <!-- 右侧功能区 -->
        <div class="feedback-right">
          <!-- 提交按钮 -->
          <div class="submit-section">
            <div class="section-header">
              <h3 class="section-title">
                <div class="title-bar"></div>
                提交反馈
              </h3>
            </div>
            <div class="submit-action">
              <a-button
                type="primary"
                :loading="submitting"
                @click="handleSubmitFeedback"
                class="submit-btn"
                size="large"
              >
                <template #icon>
                  <SendOutlined />
                </template>
                提交反馈
              </a-button>
            </div>
          </div>

          <!-- 反馈说明 -->
          <div class="feedback-info">
            <div class="section-header">
              <h3 class="section-title">
                <div class="title-bar"></div>
                反馈说明
              </h3>
            </div>
            <div class="info-list">
              <div class="info-item">
                <CheckCircleOutlined class="info-icon" />
                <span>我们会认真处理每一条反馈</span>
              </div>
              <div class="info-item">
                <ClockCircleOutlined class="info-icon" />
                <span>通常在24小时内回复</span>
              </div>
              <div class="info-item">
                <HeartOutlined class="info-icon" />
                <span>感谢您的宝贵建议</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 联系作者弹窗 -->
    <a-modal
      v-model:open="showContactModal"
      title="关于作者"
      :footer="null"
      width="900px"
      :closable="true"
      :mask-closable="true"
      class="author-modal"
      :destroy-on-close="true"
    >
      <div class="author-container">
        <!-- 左侧作者信息 -->
        <div class="author-left">
          <div class="author-header">
            <div class="header-info">
              <div class="author-title">
                <UserOutlined class="title-icon" />
                <span>关于作者</span>
              </div>
              <div class="author-subtitle">热爱技术，专注于前端开发和用户体验设计</div>
              <div class="author-stats">
                <span class="stat-item">
                  <CodeOutlined />
                  <span>Vue.js</span>
                </span>
                <span class="stat-item">
                  <CodeOutlined />
                  <span>TypeScript</span>
                </span>
                <span class="stat-item">
                  <CodeOutlined />
                  <span>UI/UX</span>
                </span>
              </div>
            </div>
          </div>

          <!-- 作者头像 -->
          <div class="author-avatar-section">
            <div class="avatar-container">
              <img src="@/assets/default_avatar.png" alt="作者头像" class="avatar-image" />
              <div class="avatar-decoration">
                <div class="decoration-ring ring-1"></div>
                <div class="decoration-ring ring-2"></div>
                <div class="decoration-dot dot-1"></div>
                <div class="decoration-dot dot-2"></div>
              </div>
            </div>
            <div class="author-info">
              <h3 class="author-name">蜂云盒子开发者</h3>
              <p class="author-bio">致力于为用户提供优质的图片管理和分享服务</p>
            </div>
          </div>
        </div>

        <!-- 右侧联系方式 -->
        <div class="author-right">
          <!-- 联系方式 -->
          <div class="contact-section">
            <div class="section-header">
              <h3 class="section-title">
                <div class="title-bar"></div>
                联系方式
              </h3>
            </div>
            <div class="contact-grid">
              <!-- 微信 -->
              <div class="contact-item wechat">
                <div class="contact-icon">
                  <WechatOutlined />
                </div>
                <div class="contact-info">
                  <span class="contact-name">微信</span>
                  <span class="contact-desc">扫码添加好友</span>
                </div>
                <div class="qr-container">
                  <img src="@/assets/wechat-qr.png" alt="微信二维码" class="qr-image" />
                  <div class="qr-overlay">
                    <WechatOutlined />
                    <span>扫码添加</span>
                  </div>
                </div>
              </div>

              <!-- QQ -->
              <div class="contact-item qq">
                <div class="contact-icon">
                  <QqOutlined />
                </div>
                <div class="contact-info">
                  <span class="contact-name">QQ</span>
                  <span class="contact-desc">2285114622</span>
                </div>
                <a-button type="link" @click="copyContact('2285114622')" class="copy-btn">
                  <CopyOutlined />
                  复制
                </a-button>
              </div>

              <!-- 邮箱 -->
              <div class="contact-item email">
                <div class="contact-icon">
                  <MailOutlined />
                </div>
                <div class="contact-info">
                  <span class="contact-name">邮箱</span>
                  <span class="contact-desc">2285114622@qq.com</span>
                </div>
                <a-button type="link" @click="copyContact('2285114622@qq.com')" class="copy-btn">
                  <CopyOutlined />
                  复制
                </a-button>
              </div>
            </div>
          </div>

          <!-- 技术栈 -->
          <div class="tech-section">
            <div class="section-header">
              <h3 class="section-title">
                <div class="title-bar"></div>
                技术栈
              </h3>
            </div>
            <div class="tech-grid">
              <div class="tech-item" v-for="tech in techStack" :key="tech.name">
                <component :is="tech.icon" class="tech-icon" />
                <span class="tech-name">{{ tech.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { message } from 'ant-design-vue'
  import {
    PlusOutlined,
    CloseOutlined,
    CalendarOutlined,
    ShareAltOutlined,
    QuestionCircleOutlined,
    MessageOutlined,
    CopyOutlined,
    ScanOutlined,
    LinkOutlined,
    InfoCircleOutlined,
    CloudUploadOutlined,
    TagsOutlined,
    FolderOutlined,
    ContactsOutlined,
    WechatOutlined,
    QqOutlined,
    MailOutlined,
    EditOutlined,
    SendOutlined,
    CheckCircleOutlined,
    ClockCircleOutlined,
    HeartOutlined,
    UserOutlined,
    CodeOutlined,
    WeiboOutlined,
  } from '@ant-design/icons-vue'
  import QRCodeVue3 from 'qrcode.vue'
  import CheckinModal from './CheckinModal.vue'
  import { submitUserFeedback } from '@/api/yonghumokuaijiekou'

  // 响应式数据
  const isMenuOpen = ref(false)
  const showCheckinModal = ref(false)
  const showShareModal = ref(false)
  const showFeedbackModal = ref(false)
  const showContactModal = ref(false)
  const shareUrl = ref(window.location.origin)
  const submitting = ref(false)

  // 反馈表单
  const feedbackForm = reactive({
    type: undefined,
    description: '',
    contact: '',
  })

  // 反馈类型选项
  const feedbackTypes = [
    { value: '功能异常', label: '功能异常', icon: QuestionCircleOutlined },
    { value: '布局优化', label: '布局优化', icon: EditOutlined },
    { value: '其他问题', label: '其他问题', icon: InfoCircleOutlined },
  ]

  // 技术栈
  const techStack = [
    { name: 'Vue.js', icon: CodeOutlined },
    { name: 'TypeScript', icon: CodeOutlined },
    { name: 'UI/UX', icon: CodeOutlined },
  ]

  // 切换菜单
  const toggleMenu = () => {
    isMenuOpen.value = !isMenuOpen.value
  }

  // 打开签到弹窗
  const openCheckin = () => {
    showCheckinModal.value = true
    isMenuOpen.value = false
  }

  // 打开分享弹窗
  const openShare = () => {
    showShareModal.value = true
    isMenuOpen.value = false
  }

  // 打开反馈弹窗
  const openFeedback = () => {
    showFeedbackModal.value = true
    isMenuOpen.value = false
  }

  // 打开联系作者弹窗
  const openContact = () => {
    showContactModal.value = true
    isMenuOpen.value = false
  }

  // 复制链接
  const copyLink = async () => {
    try {
      const text = shareUrl.value
      if (!text) {
        message.error('复制内容为空')
        return
      }

      // 创建临时输入框
      const input = document.createElement('input')
      input.value = text
      document.body.appendChild(input)
      input.select()
      input.setSelectionRange(0, text.length)

      // 执行复制
      document.execCommand('copy')
      document.body.removeChild(input)
      message.success('复制成功')
    } catch (error) {
      console.error('复制失败:', error)
      message.error('复制失败，请手动复制')
    }
  }

  // 提交反馈
  const handleSubmitFeedback = async () => {
    if (!feedbackForm.type) {
      message.warning('请选择问题类型')
      return
    }
    if (!feedbackForm.description.trim()) {
      message.warning('请输入问题描述')
      return
    }

    submitting.value = true
    try {
      const response = await submitUserFeedback(feedbackForm)

      if (response.data.code === 200) {
        message.success('感谢您的反馈！')
        // 重置表单
        feedbackForm.type = undefined
        feedbackForm.description = ''
        feedbackForm.contact = ''
        showFeedbackModal.value = false
      } else {
        message.error(response.data.message || '提交失败')
      }
    } catch (error) {
      console.error('提交反馈失败:', error)
      message.error('提交失败，请稍后重试')
    } finally {
      submitting.value = false
    }
  }

  // 分享到微信
  const shareToWechat = () => {
    message.info('分享到微信功能待实现')
    // 实际应用中，这里可以调用一个分享到微信的API
  }

  // 分享到QQ
  const shareToQQ = () => {
    message.info('分享到QQ功能待实现')
    // 实际应用中，这里可以调用一个分享到QQ的API
  }

  // 分享到微博
  const shareToWeibo = () => {
    message.info('分享到微博功能待实现')
    // 实际应用中，这里可以调用一个分享到微博的API
  }

  // 复制联系方式
  const copyContact = async (text: string) => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text)
        message.success('复制成功')
      } else {
        const input = document.createElement('input')
        input.style.position = 'fixed'
        input.style.opacity = '0'
        input.value = text
        document.body.appendChild(input)
        input.select()
        input.setSelectionRange(0, 99999)
        document.execCommand('copy')
        document.body.removeChild(input)
        message.success('复制成功')
      }
    } catch (error) {
      console.error('复制失败:', error)
      message.error('复制失败')
    }
  }
</script>

<style scoped>
  .floating-action-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
  }

  /* 主按钮 */
  .fab-main {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px var(--theme-shadow);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1001;
  }

  .fab-main:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px var(--theme-shadow);
  }

  .fab-icon {
    color: white;
    font-size: 24px;
    transition: transform 0.3s ease;
  }

  .fab-main:hover .fab-icon {
    transform: rotate(90deg);
  }

  /* 子按钮容器 */
  .fab-sub-buttons {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .fab-sub-buttons.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 子按钮 */
  .fab-sub-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--theme-surface);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--theme-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    animation: slideIn 0.3s ease;
    border: 1px solid var(--theme-border);
  }

  .fab-sub-button:hover {
    transform: translateX(-3px);
    box-shadow: 0 4px 12px var(--theme-shadow);
    background: var(--theme-background);
  }

  .fab-sub-button:nth-child(1) {
    animation-delay: 0.1s;
  }
  .fab-sub-button:nth-child(2) {
    animation-delay: 0.2s;
  }
  .fab-sub-button:nth-child(3) {
    animation-delay: 0.3s;
  }
  .fab-sub-button:nth-child(4) {
    animation-delay: 0.4s;
  }

  .sub-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
  }

  .checkin-btn .sub-icon {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  }

  .share-btn .sub-icon {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  }

  .feedback-btn .sub-icon {
    background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
  }

  .contact-btn .sub-icon {
    background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
  }

  .sub-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-text);
    white-space: nowrap;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* 分享弹窗样式 */
  .share-modal :deep(.ant-modal-content) {
    border-radius: 8px;
    background: #fff;
  }

  .share-modal :deep(.ant-modal-header) {
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
  }

  .share-modal :deep(.ant-modal-title) {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }

  .share-modal :deep(.ant-modal-body) {
    padding: 24px;
  }

  .share-container {
    display: flex;
    gap: 30px;
  }

  .share-left,
  .share-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .share-header,
  .feedback-header,
  .author-header {
    background: linear-gradient(145deg, var(--theme-surface) 0%, var(--theme-background) 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px var(--theme-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-info {
    display: flex;
    flex-direction: column;
  }

  .share-title,
  .feedback-title,
  .author-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text);
    font-weight: 600;
  }

  .share-title .title-icon,
  .feedback-title .title-icon,
  .author-title .title-icon {
    color: #1890ff;
    font-size: 20px;
  }

  .share-subtitle,
  .feedback-subtitle,
  .author-subtitle {
    font-size: 14px;
    color: var(--theme-textSecondary);
    margin-top: 4px;
  }

  .share-stats,
  .feedback-stats,
  .author-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--theme-surface);
    border-radius: 4px;
    color: var(--theme-textSecondary);
    font-size: 14px;
  }

  .stat-item .anticon {
    color: var(--theme-primary);
  }

  .qr-section {
    text-align: center;
    padding: 80px;
    background: var(--theme-background);
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    position: relative;
    box-shadow: 0 8px 24px var(--theme-shadow);
    overflow: hidden;
  }

  .qr-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
  }

  .qr-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 15px;
  }

  .qr-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-surface);
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px var(--theme-shadow);
    transition: all 0.3s ease;
    position: relative;
  }

  .qr-background::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .qr-background:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 8px 28px var(--theme-shadow);
    transform: translateY(-2px);
  }

  .qr-background:hover::after {
    opacity: 0.3;
  }

  .qr-code {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .qr-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
  }

  .decoration-dot {
    width: 10px;
    height: 10px;
    background: #1890ff;
    border-radius: 50%;
    opacity: 0.3;
  }
  .scan-icon {
    color: var(--theme-primary);
    font-size: 18px;
  }

  .share-action {
    text-align: center;
  }

  .share-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  .section-header {
    margin-bottom: 20px;
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text);
    font-weight: 600;
    font-size: 18px;
  }

  .title-bar {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
    border-radius: 1px;
  }

  .platform-grid,
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }

  .platform-item,
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--theme-background);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--theme-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }

  .platform-item:hover,
  .feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px var(--theme-shadow);
  }

  .platform-item .platform-icon,
  .feature-item .feature-icon {
    font-size: 28px;
    color: var(--theme-primary);
  }

  .platform-item .platform-info,
  .feature-item .feature-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .platform-name,
  .feature-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
  }

  .platform-desc,
  .feature-desc {
    font-size: 12px;
    color: var(--theme-textSecondary);
  }

  .platform-badge {
    background: var(--theme-primary);
    color: var(--theme-surface);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
  }

  .features-section {
    background: var(--theme-background);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 8px 24px var(--theme-shadow);
  }

  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .feature-item {
    background: var(--theme-surface);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .feature-item .feature-icon {
    font-size: 28px;
    color: var(--theme-primary);
  }

  .feature-item .feature-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .feature-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
  }

  .feature-desc {
    font-size: 12px;
    color: var(--theme-textSecondary);
  }

  /* 反馈弹窗样式 */
  .feedback-modal :deep(.ant-modal-content) {
    border-radius: 8px;
    background: var(--theme-surface);
  }

  .feedback-modal :deep(.ant-modal-header) {
    padding: 16px 24px;
    border-bottom: 1px solid var(--theme-border);
  }

  .feedback-modal :deep(.ant-modal-title) {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--theme-text);
  }

  .feedback-modal :deep(.ant-modal-body) {
    padding: 24px;
  }

  .feedback-container {
    display: flex;
    gap: 30px;
  }

  .feedback-left,
  .feedback-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .feedback-header {
    background: linear-gradient(145deg, var(--theme-surface) 0%, var(--theme-background) 100%);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px var(--theme-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .feedback-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .form-section {
    background: var(--theme-background);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .form-section .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
  }

  .form-section .section-title .anticon {
    color: var(--theme-primary);
  }

  .type-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .type-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: var(--theme-textSecondary);
  }

  .type-option:hover {
    background: var(--theme-background);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  .type-option.active {
    background: var(--theme-background);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
    font-weight: 600;
  }

  .type-option .type-icon {
    font-size: 18px;
    color: var(--theme-primary);
  }

  .description-input {
    height: 100px;
    padding: 12px;
    font-size: 14px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    resize: none;
    box-shadow: inset 0 1px 3px var(--theme-shadow);
  }

  .description-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary);
    outline: none;
  }

  .contact-input {
    height: 40px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px var(--theme-shadow);
  }

  .contact-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px var(--theme-primary);
    outline: none;
  }

  .submit-section {
    text-align: center;
  }

  .submit-action {
    margin-top: 20px;
  }

  .submit-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  .feedback-info {
    background: var(--theme-background);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-textSecondary);
    font-size: 14px;
  }

  .info-item .info-icon {
    font-size: 18px;
    color: var(--theme-primary);
  }

  /* 作者弹窗样式 */
  .author-modal :deep(.ant-modal-content) {
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--theme-surface) 0%, var(--theme-background) 100%);
    box-shadow: 0 20px 60px var(--theme-shadow);
  }

  .author-modal :deep(.ant-modal-header) {
    padding: 24px;
    border-bottom: none;
    background: transparent;
  }

  .author-modal :deep(.ant-modal-title) {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .author-container {
    display: flex;
    gap: 30px;
  }

  .author-left,
  .author-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .author-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .avatar-container {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--theme-surface);
    box-shadow: 0 0 10px var(--theme-shadow);
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
  }

  .decoration-ring {
    width: 10px;
    height: 10px;
    background: var(--theme-primary);
    border-radius: 50%;
    opacity: 0.3;
  }

  .decoration-dot {
    width: 10px;
    height: 10px;
    background: var(--theme-primary);
    border-radius: 50%;
    opacity: 0.3;
  }

  .author-info {
    display: flex;
    flex-direction: column;
  }

  .author-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-text);
    margin-bottom: 4px;
  }

  .author-bio {
    font-size: 14px;
    color: var(--theme-textSecondary);
    line-height: 1.5;
  }

  .contact-section {
    background: var(--theme-background);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--theme-surface);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--theme-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .contact-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--theme-shadow);
  }

  .contact-icon {
    font-size: 28px;
    color: var(--theme-primary);
  }

  .contact-icon.wechat {
    color: #52c41a;
  }

  .contact-icon.qq {
    color: #12b7f5;
  }

  .contact-icon.email {
    color: #ff4081;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
  }

  .contact-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text);
  }

  .contact-desc {
    font-size: 12px;
    color: var(--theme-textSecondary);
  }

  .qr-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin-left: auto;
  }

  .qr-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  .qr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(33, 150, 243, 0.9);
    border-radius: 8px;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .qr-overlay .anticon {
    font-size: 32px;
    color: #fff;
    margin-bottom: 8px;
  }

  .qr-overlay span {
    color: #fff;
    font-size: 12px;
  }

  .qr-container:hover .qr-overlay {
    opacity: 1;
  }

  .tech-section {
    background: var(--theme-background);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px var(--theme-shadow);
  }

  .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .tech-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-surface);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px var(--theme-shadow);
  }

  .tech-icon {
    font-size: 20px;
    color: #1890ff;
  }

  .tech-name {
    font-size: 14px;
    color: var(--theme-text);
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .floating-action-container {
      bottom: 20px;
      right: 20px;
    }

    .fab-main {
      width: 50px;
      height: 50px;
    }

    .fab-icon {
      font-size: 20px;
    }

    .fab-sub-buttons {
      bottom: 60px;
      gap: 12px;
    }

    .fab-sub-button {
      padding: 10px 14px;
    }

    .sub-icon {
      width: 35px;
      height: 35px;
      font-size: 16px;
    }

    .sub-label {
      font-size: 13px;
    }

    .share-container,
    .feedback-container,
    .author-container {
      flex-direction: column;
      gap: 20px;
    }

    .share-left,
    .share-right,
    .feedback-left,
    .feedback-right,
    .author-left,
    .author-right {
      width: 100%;
    }

    .share-modal :deep(.ant-modal-body),
    .feedback-modal :deep(.ant-modal-body),
    .author-modal :deep(.ant-modal-body) {
      padding: 16px;
    }

    .share-header,
    .feedback-header,
    .author-header {
      padding: 15px;
    }

    .share-title,
    .feedback-title,
    .author-title {
      font-size: 16px;
    }

    .share-subtitle,
    .feedback-subtitle,
    .author-subtitle {
      font-size: 13px;
    }

    .share-stats,
    .feedback-stats,
    .author-stats {
      gap: 8px;
    }

    .stat-item {
      padding: 3px 10px;
      font-size: 12px;
    }

    .qr-container {
      width: 150px;
      height: 150px;
    }

    .qr-code {
      width: 100%;
      height: 100%;
    }

    .share-btn,
    .submit-btn {
      max-width: 100%;
    }

    .platform-grid,
    .features-grid {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .platform-item,
    .feature-item {
      padding: 10px 14px;
    }

    .platform-name,
    .feature-name {
      font-size: 13px;
    }

    .platform-desc,
    .feature-desc {
      font-size: 11px;
    }

    .platform-badge {
      padding: 3px 8px;
      font-size: 11px;
    }

    .contact-grid {
      grid-template-columns: 1fr;
    }

    .contact-item {
      padding: 10px 14px;
    }

    .contact-icon {
      font-size: 24px;
    }

    .contact-name {
      font-size: 13px;
    }

    .contact-desc {
      font-size: 11px;
    }

    .qr-container {
      margin-left: 0;
    }

    .qr-image {
      width: 100%;
      height: 100%;
    }

    .tech-grid {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .tech-item {
      padding: 8px 10px;
    }

    .tech-name {
      font-size: 13px;
    }
  }

  @media (max-width: 480px) {
    .fab-sub-button {
      padding: 8px 12px;
    }

    .sub-icon {
      width: 30px;
      height: 30px;
      font-size: 14px;
    }

    .sub-label {
      font-size: 12px;
    }
  }
</style>
